03_01 Using Inline Styles

Inline Styles

One of the way to control styles in Vue.js by binding them through the style attribute.

Binding with :style

  <div :style="{ color: 'blue', 'font-weight': myWeight, fontSize: mySize + 'em' }">Headline</div>

data() {
  return {
    myColor: 'red',
    myWeight: 100,
    mySize: 3
  }
}

The style binding is like adding a style tag with some important differences.

You can pass along an object with the style name on the left and either a string on the right, a variable name or a simple formula for the value.

Notice that you can use camel case or kabob-case for properties that have hyphens in them. If you want to use kabob-case then you need to put the name in quotes.

Object Notation

  <div :style="myStyles">Headline</div>

data() {
  return {
    myStyles: { 
      color: 'blue', 
      fontWeight: 100,
      fontSize: '5em'
    }
  }
}

It's definitely cleaner to use object notation if you have a lot of styles.

Array Syntax

  <div :style="[stylesA, stylesB]">Headline</div>

data() {
  return {
    stylesA: { 
      color: 'blue',
      bgColor: 'yellow'
    },
    stylesB: { 
      fontWeight: 100,
      fontSize: '5em'
    }
  }
}

You can also use array notation on styles and call different objects.

Prefixing

• auto-prefixing (-webkit, -ms, etc)

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

Docsgo.raybo.org/2Dgt

Vue.js will automatically prefix the css that your write for you.

On ocassion, you may want further control, so you can use this object/array combo notation and it will apply whichever prefix the browser supports.

Practice

1. Change + button radius to circle
2. Add a green border to + button
3. Modify cart background when cartTotal >=100

Here's a project you can try out.

To get started, change the plus buttons on our cart so that they display as circles as opposed to rounded rectangles.

Also add a green border. Try doing this with embedded object or a separate object variable.

Now change the cart so that if your cart total is larger than or equal to 100 dollars, the cart icon has a red background.